/* eslint-disable react/no-array-index-key */

import React from 'react'
import styles from './index.module.less'
import { StarFill } from 'antd-mobile-icons'
import type { SwiperItemProps, ManageType } from '@/pages/report/department/interface'
interface Props extends SwiperItemProps {
    multipleIndex: number
    data: ManageType['course_student_module']
}

export const ProjectPage = (props: Props) => {
    const { current, itemIndex, multipleIndex = 0, data } = props
    const isActive = current === itemIndex

    return (
        <div className={styles.project}>
            <h4>开展学员培训的年度项目是</h4>
            <div className={isActive ? styles.active : styles.project_wrapper}>
                <div
                    className={styles.project_wrapper_content}
                    // onTouchMove={e => {
                    //     e?.stopPropagation()
                    // }}
                >
                    {data?.map((item, index) => {
                        return (
                            <div key={index} className={styles.project_wrapper_content_item}>
                                <h6>
                                    {multipleIndex * 3 + index + 1}. <p> {item.course_name}</p>
                                </h6>
                                <section>
                                    <div className={styles.statistics}>
                                        <StarFill />
                                        <p>
                                            <span>{item.group_num}</span>期班级，
                                            <span>{item.student_num}</span>名参训学员
                                        </p>
                                    </div>
                                    <div className={styles.line} />
                                    <div className={styles.statistics}>
                                        <StarFill />
                                        <p>
                                            <span>{item.student_quality_num}</span>
                                            人培训合格，合格率<span>{item.quality_percent}</span>
                                        </p>
                                    </div>
                                </section>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    )
}

export default ProjectPage
